import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { message } from 'antd';
import { DATA_ENTRY, AdvancedSearch, TableC, FirstHeaderC, ContentPackage } from '../../../comps';
import myStyle from './index.less';
import { formSelectData } from '../../../utils/utils';
const formItemLayout = {
  labelCol: {
    span: 8,
    offset: 0,
  },
  wrapperCol: {
    span: 16,
    offset: 0,
  },
};
@connect(({ headOfficeM, globalM, loading }) => ({
  headOfficeM,
  globalM,
  loading: loading.effects['headOfficeM/queryTableList'],
}))
export default class headOfficeC extends PureComponent {
  state = {
    columns: [],
    dataSource: [], //银行数据
    currentPage: 1, //当前页码
    numInPage: 10, //每页条数
    total: 0,
    searchObj: {}, //查询条件
    selectProductList: [], //托管代销资格列表
    isReset: false, //是否点击重置
  };

  componentDidMount() {
    this.getTableDate();
    //获取托管资格数据
    const {
      globalM: {
        dataDictionary: { conpanyName_cCustodian = [] },
      },
    } = this.props;
    this.setState({
      selectProductList: formSelectData(conpanyName_cCustodian),
    });
  }

  //获取表格数据
  getTableDate = () => {
    const { dispatch } = this.props;
    const { searchObj, currentPage, numInPage } = this.state;
    dispatch({
      type: 'headOfficeM/queryTableList',
      payload: {
        ...searchObj,
        currentPage: currentPage,
        numInPage: numInPage,
      },
      callback: (status, data) => {
        if (status == 'success' && data) {
          this.setState({
            columns: data.columns,
            dataSource: data.dataSource,
            currentPage: data.pageInfo.currentPage,
            numInPage: data.pageInfo.numInPage,
            total: data.pageInfo.total,
          });
        }
      },
    });
  };

  //表格页码排序改变调用
  handleTableChange = (pagination) => {
    const { current, pageSize } = pagination;
    if (this.state.isReset) {
      //判断是否点击了重置 点击页码不进行后台查询
      message.warning('查询条件已被重置，请重新查询。');
      this.setState({
        isReset: false,
      });
      return;
    }
    this.setState(
      {
        currentPage: current,
        numInPage: pageSize,
      },
      () => {
        this.getTableDate();
      },
    );
  };

  //展示表格数据
  showTable = () => {
    const { columns, dataSource, currentPage, numInPage, total } = this.state;

    return (
      <div style={{ marginTop: '10px' }}>
        <TableC
          columns={columns}
          loading={this.props.loading}
          dataSource={dataSource}
          current={currentPage}
          pageSize={numInPage}
          total={total}
          selfScrollY={true}
          scroll={{ x: 'max-content' }}
          rowKey='vcBankName'
          pagination={true}
          onChange={this.handleTableChange}
        />
        {/* <iframe src='http://160.22.10.158:3000'></iframe> */}
      </div>
    );
  };

  //查询表格数据
  queryTableList = (e) => {
    this.setState(
      {
        searchObj: e,
        currentPage: 1,
        numInPage: 10,
        isReset: false,
      },
      () => {
        this.getTableDate();
      },
    ); //查询之前清除数据
  };

  render() {
    const { selectProductList } = this.state;
    const searchProps = {
      dataSource: [
        {
          dataIndex: 'blankName',
          title: '银行名称',
          type: DATA_ENTRY.INPUT,
        },
        {
          dataIndex: 'collocationStatus',
          title: '托管/代销资格',
          type: DATA_ENTRY.SELECT,
          dataSource: selectProductList,
          formItemLayout: formItemLayout,
        },
      ],
      onQuery: (e) => {
        //点击查询按钮
        this.queryTableList(e);
      },

      onClear: () => {
        //点击重置按钮
        this.setState({
          searchObj: {},
          isReset: true,
        });
      },
    };

    return (
      <ContentPackage
        title='存款总行管理'
        contentHtml={
          <div className={myStyle.splitPositionQuery}>
            <div className={'cardBody'}>
              <AdvancedSearch {...searchProps} />
            </div>
            <div>{this.showTable()}</div>
          </div>
        }
      />
    );
  }
}
